<template>
  <div>
    <div class="addPurchase">
      <!-- <el-button type="primary">采购申请</el-button> -->
      <el-button type="primary" @click="addPurchase ()">采购申请</el-button>
      <!-- 表单提交开始 -->
      <el-dialog :title="edit" :visible.sync="dialogFormVisible" width="40%">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="物品名称" prop="goods">
            <el-input v-model="ruleForm.goods" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="规格型号" prop="model">
            <el-input v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="ruleForm.unit" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input v-model.number="ruleForm.number"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model.number="ruleForm.price" placeholder="采购人填写 !"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="notice">
            <el-input v-model.number="ruleForm.notice"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{sureSub}}</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 表单提交结束 -->
    <el-table :data="tableData" style="width: 100%" border="" fit highlight-current-row>
      <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
      <el-table-column prop="goods" label="物品名称" align="center"></el-table-column>
      <el-table-column prop="model" label="规格型号" align="center" width="200"></el-table-column>
      <el-table-column prop="unit" label="单位" align="center" width="150"></el-table-column>
      <el-table-column prop="number" label="数量" align="center" width="150"></el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="150"></el-table-column>
      <el-table-column prop="notice" label="备注" align="center" width="150"></el-table-column>
      <el-table-column prop="state" label="采购进度" align="center" width="150">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="complete(scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="edit" label="编辑" align="center" width='200'>
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-check" circle @click="open(scope.row)"></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editPurchase(scope.row.id,scope.row)"
          ></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delPurchase(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('数量不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback()
        }
      }, 1000);
    }
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      sureSub: "",
      edit: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      tableData: [
        {
          id: "1",
          goods: "鼠标 ",
          unit: "件",
          model: "普通",
          number: "5",
          notice: "",
          state: "",
          value: false
        },
        {
          id: "2",
          goods: "键盘",
          unit: "件",
          model: "普通",
          number: "5",
          notice: "",
          state: "",
          value: false
        },
        {
          id: "3",
          goods: "显示器",
          unit: "台",
          model: "普通",
          number: "5",
          notice: "",
          state: "",
          value: false
        },
        {
          id: "4",
          goods: "机箱",
          unit: "台",
          model: "普通",
          number: "5",
          notice: "",
          state: "",
          value: false
        }
      ],
      ruleForm: {
        price: "",
        model: "",
        notice: "",
        number: "",
        goods: "",
        unit: ""
      },
      rules: {
        goods: [{ required: true, message: "请输入物品名称", trigger: "blur" }],
        number: [{ validator:checkNum, required: true,  trigger: "blur" }],
        // checkPass: [
        //   { validator: validatePass2, required: true, trigger: "blur" }
        // ],
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 12, message: "长度在 4到 12个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2到 6个字符", trigger: "blur" }
        ],
        power: [{ required: true, message: "请选择权限类型", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm () {
      //this.$refs[formName].resetFields()
      this.ruleForm = {
        price: "",
        model: "",
        notice: "",
        number: "",
        goods: "",
        unit: ""
      };
    },
    addPurchase() {
      this.dialogFormVisible = true;
      this.edit = "添加采购申请单";
      this.sureSub = "确认添加";
      this.resetForm();
    },
    editPurchase (i, info) {
      this.dialogFormVisible = true;
      this.edit = "修改采购申请单";
      this.sureSub = "确认修改";
      // this.ruleForm
      console.log(info);
      this.ruleForm = info;
    },
    delPurchase (id) {
      console.log(id);
      this.$confirm("此操作将永久删除该申请单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    open(info) {
      console.log(info);
      this.$confirm("完成此采购申请单并提交到历史采购单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "提交成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },
    complete(id) {
      let leng = id - 1;
      this.tableData[leng].value = !this.tableData[leng].value;
      if (!this.tableData[leng].value) {
        this.$message({
          type: "warning",
          message: "正在采购"
        })
        return;
      } else {
        this.$message({
          type: "success",
          message: "采购完成!"
        });
      }
    }
  }
};
</script>

<style lang='scss'>
.addPurchase {
  margin-bottom: 20px !important;
}
</style>
